<template>
    <m-input v-bind="$attrs" v-model="input">
        <span slot="right" class="c2" @click.prevent="onStart" v-if="time <= 0">获取验证码</span>
        <span slot="right" class="c2" v-else>{{time}}秒</span>
    </m-input>
</template>
<script>
  export default {
    props: {
      value: null,
      updateCode: {
        type:Function,
        default: next => next()
      }
    },
    data () {
      const {$data} = this.$parent
      return {
        ...$data,
        time: 0,
        duration: 60
      }
    },
    computed: {
      input: {
        get () {
          return this.value
        },
        set (v) {
          this.$emit('input', v)
        }
      }
    },
    methods: {
      onStart () {
        const f = () => {
          this.time = this.duration
          this.id = setInterval(() => {
            if (--this.time <= 0) clearInterval(this.id)
          }, 1000)
        }
        this.updateCode(f)
      },
    },
    destroyed () {
      clearInterval(this.id)
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
